<template>
   <div class="new_container">
     <div index="2" class="title">
            <span class="titlename">{{title}}</span>
      </div>
      <el-col>
        <div class="new_content"
             v-for="item in newsList"
             :key="item.id"
             :offset="index = 0"
              >
          <img :src="item.imgUrl"
               class="news_image" />
          <p class="new_desc">{{item.desc}}</p>
        </div>
      </el-col>
    </div>
</template>
<script>
export default {
  name: 'LeftNews',
  data () {
    return {
      title: 'Hot News',

      newsList: [
        {
          id: '001',
          imgUrl:
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3258558168,333999865&fm=26&gp=0.jpg',
          desc: 'Anim moon officia Unify is an incredibly beautiful responsive and how are you'
        }, {
          id: '002',
          imgUrl:
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2324591521,3758538934&fm=26&gp=0.jpg',
          desc: 'Anim moon officia Unify is an incredibly beautiful responsive and how are you'
        },
        {
          id: '003',
          imgUrl:
          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3259566178,687556314&fm=15&gp=0.jpg',
          desc: 'Anim moon officia Unify is an incredibly beautiful responsive and how are you'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.new_container{
  width: 275px;
  margin-top: 50px;
  text-align:center;
  .title {
    background-color: #72C02C;
    border-radius: 4px 4px 0 0;
    margin-bottom: 4px;
      .titlename{
        font-size: 20px;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        color: #fff;
    }
  }
  .new_content{
    height: 65px;
    color: #666666;
    font-size: 13.5px;
    border-left: #BBBBBB 2px solid;
    border-right: #BBBBBB 2px solid;
    border-bottom: #BBBBBB 2px solid;
    display: flex;
    align-items: center;
    transition:  all .3s linear;
    &:hover{
      cursor: pointer;
      background-color: #72C02C;
      color: #fff;
    }
    .news_image{
        margin: 5px;
        width: 50px;
        height: 50px;
        float: left;
        position: relative;
        border: solid 3px #eee;
    }
    .new_desc{
      position: relative;
      left: 2px;
      width: 200px;
      height: 42px;
      line-height: 21px;
      word-break:break-all;
      // p标签超出显示...
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; //需要控制的文本行数
      overflow: hidden;
    }
  }

}

</style>
